<template>
	<view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll" @scrolltolower="lower">
			<view class="product-group">
				<!-- key要换 -->
				<view v-if="productList.length>0" class="product-list card" v-for="(item,index) in productList" :key="index" @click="openTrader()">
					<view class="product-left">
						<image v-if="item.type==1 || item.type==2 || item.type==3 || item.type==4 || item.type==5 || item.type==6" :src="imgUrl+item.materialUrl" style="border-radius: 10rpx;"></image>
						<image v-if="item.type==8" src="/static/public-images/points.png" style="border-radius: 10rpx;"></image>
						<image v-if="item.type==9" src="/static/public-images/bx.png" style="border-radius: 10rpx;"></image>
						<view>
							<view class="product-name">{{setType(item.type) || '未知'}}</view>
							<view class="product-price">
								<view>数量:{{item.skus || 0}}</view>
								<view>单价:{{item.price || 0}}能量</view>
							</view>
							<view class="sum">总价:{{item.totalPrice || 0}}能量</view>
						</view>
					</view>
					<view class="product-right" @click.stop="buy(item)">
						售出
					</view>
				</view>
				<view v-if="productList.length==0" class="none">
					暂无信息
				</view>
			</view>
		</scroll-view>

		<!-- 确认购买弹窗 -->
		<buyPopup ref="buyRef" @success="getList"></buyPopup>

		<!-- 交易信息 -->
		<traderPopup ref="traderRef"></traderPopup>

	</view>
</template>

<script>
	import {
		tradingList
	} from '@/api/market.js'
	import buyPopup from '@/pages/market/components/buyPopup/index.vue'
	import traderPopup from '@/pages/market/components/traderPopup/index.vue'
	import config from '@/config'
	export default {
		components: {
			buyPopup,
			traderPopup
		},
		data() {
			return {
				imgUrl:config.uploadUrl,
				scrollTop: 0,
				productList: [],
				params: {
					pageNo: 1,
					pageSize: 20,
					queryType:null
				},
				total: 0,
				id: null
			}
		},
		methods: {
			setID(id){
				this.params.pageNo=1
				this.params.queryType = id
				this.getList()
			},
			// 获取列表数据
			async getList() {
				let res = await tradingList(this.params)
				this.productList = res.data.records
				this.total = res.data.total
			},
			// 类型：1=1%合成石 2=2%合成石 3=5%合成石 4=10合成石% 5=20%合成石 6=50%合成石，8=积分,9=宝箱
			setType(type) {
				switch (type) {
					case 1:
						return '1%合成石'
						break;
					case 2:
						return '2%合成石'
						break;
					case 3:
						return '5%合成石'
						break;
					case 4:
						return '10合成石%'
						break;
					case 5:
						return '20%合成石'
						break;
					case 6:
						return '50%合成石'
						break;
					case 7:
						return '5%合成石'
						break;
					case 8:
						return '积分'
						break;
					case 9:
						return '宝箱'
						break;
					default:
						return '神秘商品'
				}
			},
			buy(item) {
				console.log('item:', item);
				this.$refs.buyRef.open(item)
			},
			openTrader() {
				// this.$refs.traderRef.open()
			},
			lower() {
				if (this.productList.length < this.total) {
					this.params.pageNo++
					this.getList()
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.scroll {
		height: calc(100vh - 500rpx);
		overflow: hidden;
	}

	.product-group {
		display: flex;
		flex-direction: column;
	}

	.product-list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.product-name {
		font-size: 36rpx;
		color: #fff;
		font-weight: 700;
	}

	.product-price {
		display: flex;
		align-items: center;
		gap: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #9ca3af;
	}

	.sum {
		font-size: 28rpx;
		font-weight: 600;
		color: #4caf50;
	}

	.product-left {
		display: flex;
		align-items: center;

		image {
			width: 120rpx;
			height: 120rpx;
			display: block;
			margin-right: 20rpx;
		}
	}

	.product-right {
		border-radius: 20rpx;
		background-color: #ff6b6b;
		box-shadow: 0 4rpx 20rpx rgba(255, 62, 62, 0.6);
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		padding: 20rpx 40rpx;
	}
</style>